<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="plugin/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="plugin/js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="plugin/js/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript">
var validate_id = false;
var validate_password = false;
var validate_retype = false;
var validate_name = false;
var validate_phone = false;
var validate_address = false;
$("input#id").blur(function() {
	var id = document.getElementById("id").value;
	
	if(id == "") {
		document.getElementById("validate_id").innerHTML = "empty";
		validate_id = false;
	}
	else {
		$.ajax({
		    type		: "POST",
		    url			: "./duplicate",
		    data		: "id="+document.getElementById("id").value,
			dataType	: "text",
			success		: function(resp) {
				if(resp == "true") {
					document.getElementById("validate_id").innerHTML = "duplicate";
					validate_id = false;
				}
				else {
					document.getElementById("validate_id").innerHTML = "ok";
					validate_id = true;
				}
			}
		});
	}
});
$("input#password").blur(function() {
	var password = document.getElementById("password").value;
	
	if(password == "") {
		document.getElementById("validate_password").innerHTML = "empty";
		validate_password = false;
	}
	else {
		document.getElementById("validate_password").innerHTML = "ok";
		validate_password = true;
	}
});
$("input#retype").blur(function() {
	var password = document.getElementById("password").value;
	var retype = document.getElementById("retype").value;
	
	if(retype == "") {
		document.getElementById("validate_retype").innerHTML = "empty";
		validate_retype = false;
	}
	else if (retype != password){
		document.getElementById("validate_retype").innerHTML = "inconsistent";
		validate_retype = false;
	}
	else {
		document.getElementById("validate_retype").innerHTML = "ok";
		validate_retype = true;
	}
});
$("input#name").blur(function() {
	var name = document.getElementById("name").value;
	
	if(name == "") {
		document.getElementById("validate_name").innerHTML = "empty";
		validate_name = false;
	}
	else {
		document.getElementById("validate_name").innerHTML = "ok";
		validate_name = true;
	}
});
$("input#phone").blur(function() {
	var phone = document.getElementById("phone").value;
	var regex = new RegExp("[0-9][0-9][0-9]-([0-9][0-9][0-9][0-9]|[0-9][0-9][0-9])-[0-9][0-9][0-9][0-9]");

	if(phone == "") {
		document.getElementById("validate_phone").innerHTML = "empty";
		validate_phone = false;
	}
	else if(regex.test(phone) == false) {
		document.getElementById("validate_phone").innerHTML = "not proper";
		validate_phone = false;
	}
	else {
		document.getElementById("validate_phone").innerHTML = "ok";
		validate_phone = true;
	}
});
$("input#address").blur(function() {
	var address = document.getElementById("address").value;
	
	if(address == "") {
		document.getElementById("validate_address").innerHTML = "empty";
		validate_address = false;
	}
	else {
		document.getElementById("validate_address").innerHTML = "ok";
		validate_address = true;
	}
});
function validate() {
	var validate = validate_id&validate_password&validate_retype&validate_name&validate_phone&validate_address;
	if(true) {
		$.ajax({
		    type		: "POST",
		    url			: "./registerUser",
		    data		: "id="+document.getElementById("id").value + "&password="+document.getElementById("password").value 
		    	+ "&name="+document.getElementById("name").value + "&phone="+document.getElementById("phone").value
		    	+ "&address="+document.getElementById("address").value + "&type="+document.getElementById("type").value,
			dataType	: "text",
			success		: function(resp) {
				if(resp == "true") {
					alert("Success to register");
					location.href="./index.jsp";
				}
				else {
					alert("false");
				}
			}
		});
	}
	else {
		alert("Please check your form");
	}
}
</script>
</head>
<body>

<table>
	<tr>
		<td>Id</td>
		<td><input id="id" type="text"/></td>
		<td width="75"><span id="validate_id"></span></td>
	</tr>
	<tr>
		<td>Password</td>
		<td><input id="password" type="password"/></td>
		<td width="75"><span id="validate_password"></span></td>
	</tr>
	<tr>
		<td>Retype-password</td>
		<td><input id="retype" type="password"/></td>
		<td width="75"><span id="validate_retype"></span></td>
	</tr>
	<tr>
		<td>Name</td>
		<td><input id="name" type="text"/></td>
		<td width="75"><span id="validate_name"></span></td>
	</tr>
	<tr>
		<td>Phone</td>
		<td><input id="phone" type="text"/></td>
		<td width="75"><span id="validate_phone"></span></td>		
	</tr>
	<tr>
		<td>Address</td>
		<td><input id="address" type="text"/></td>
		<td width="75"><span id="validate_address"></span></td>
	</tr>
	<tr>
		<td>E-mail</td>
		<td><input id="address" type="text"/></td>
		<td width="75"><span id="validate_email"></span></td>
	</tr>
	
	<tr>
		<td colspan="2" align="right"><input type="submit" value="Submit" onclick="validate()"/></td>
	</tr>
</table>
</body>
</html>